<template>
    <div class="alumbs">
        <div class="top">
            <el-button type="primary" size="default" @click="add_img">添加照片</el-button>

        </div>
        <el-tabs @tab-change="choiceyear" v-model="dates.year" type="border-card">
            <el-tab-pane :name="2024" label="2024">
                <el-tabs @tab-change="choice" v-model="dates.month">
                    <el-tab-pane label="1月" :name="1"></el-tab-pane>
                    <el-tab-pane label="2月" :name="2"></el-tab-pane>
                    <el-tab-pane label="3月" :name="3"></el-tab-pane>
                    <el-tab-pane label="4月" :name="4"></el-tab-pane>
                    <el-tab-pane label="5月" :name="5"></el-tab-pane>
                    <el-tab-pane label="6月" :name="6"></el-tab-pane>
                    <el-tab-pane label="7月" :name="7"></el-tab-pane>
                    <el-tab-pane label="8月" :name="8"></el-tab-pane>
                    <el-tab-pane label="9月" :name="9"></el-tab-pane>
                    <el-tab-pane label="10月" :name="10"></el-tab-pane>
                    <el-tab-pane label="11月" :name="11"></el-tab-pane>
                    <el-tab-pane label="12月" :name="12"></el-tab-pane>
                </el-tabs>
            </el-tab-pane>
            <el-tab-pane label="2023" :name="2023">
                <el-tabs @tab-change="choice" v-model="dates.month">
                    <el-tab-pane label="1月" :name="1"></el-tab-pane>
                    <el-tab-pane label="2月" :name="2"></el-tab-pane>
                    <el-tab-pane label="3月" :name="3"></el-tab-pane>
                    <el-tab-pane label="4月" :name="4"></el-tab-pane>
                    <el-tab-pane label="5月" :name="5"></el-tab-pane>
                    <el-tab-pane label="6月" :name="6"></el-tab-pane>
                    <el-tab-pane label="7月" :name="7"></el-tab-pane>
                    <el-tab-pane label="8月" :name="8"></el-tab-pane>
                    <el-tab-pane label="9月" :name="9"></el-tab-pane>
                    <el-tab-pane label="10月" :name="10"></el-tab-pane>
                    <el-tab-pane label="11月" :name="11"></el-tab-pane>
                    <el-tab-pane label="12月" :name="12"></el-tab-pane>
                </el-tabs>
            </el-tab-pane>
            <el-tab-pane label="2022" :name="2022">
                <el-tabs @tab-change="choice" v-model="dates.month">
                    <el-tab-pane label="1月" :name="1"></el-tab-pane>
                    <el-tab-pane label="2月" :name="2"></el-tab-pane>
                    <el-tab-pane label="3月" :name="3"></el-tab-pane>
                    <el-tab-pane label="4月" :name="4"></el-tab-pane>
                    <el-tab-pane label="5月" :name="5"></el-tab-pane>
                    <el-tab-pane label="6月" :name="6"></el-tab-pane>
                    <el-tab-pane label="7月" :name="7"></el-tab-pane>
                    <el-tab-pane label="8月" :name="8"></el-tab-pane>
                    <el-tab-pane label="9月" :name="9"></el-tab-pane>
                    <el-tab-pane label="10月" :name="10"></el-tab-pane>
                    <el-tab-pane label="11月" :name="11"></el-tab-pane>
                    <el-tab-pane label="12月" :name="12"></el-tab-pane>
                </el-tabs>
            </el-tab-pane>

        </el-tabs>
        <div class="alumb" @scroll="scrolls" ref="srco">
            <div class="days" v-for="(item, index) in image_list" :key="item._id">
                <p>{{ item.day }}日</p>
                <div class="images">
                    <div style="width: 23%;" v-for="img in item.Albumbs" :key="img">
                        <el-image style="width: 100%;height: 13vw;" :src="base_url + img" fit="fill"
                            :lazy="true"></el-image>
                        <img @click="deletes(index, img, item.year, item.month, item.day)"
                            style="background-color: rgba(0,0,0,0.7);" src="../../../assets/svg/BackStage/close.svg"
                            alt="">
                    </div>


                </div>
            </div>

        </div>
        <el-dialog v-model="dialogFormVisible" width="500">

            <el-upload ref="uploadRef" :on-change="onchange" multiple v-model:file-list="fileList" :auto-upload="false"
                :action="base_url + '/albums'" list-type="picture-card" :on-preview="handlePictureCardPreview"
                :on-remove="handleRemove">
                <el-icon>
                    <Plus />
                </el-icon>
            </el-upload>

            <el-dialog v-model="dialogVisible">
                <img w-full :src="dialogImageUrl" alt="Preview Image" />
            </el-dialog>
            <template #footer>
                <span>
                    <el-button @click="dialogFormVisible = false">取消</el-button>
                    <el-button type="primary" @click="update_img">确认</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref, nextTick } from "vue"
import { ElMessage, type UploadInstance } from 'element-plus'
import AlbumsStore from "@/store/AlbumStore";
import { format } from "@/utils/formatTime"
import { post_img } from "@/apis/AlbumApi"
import { Plus } from '@element-plus/icons-vue'
import { type Album } from "@/types/Albums"
import type { UploadProps, UploadUserFile } from 'element-plus'
const base_url = import.meta.env.VITE_APP_URL
const fileList = ref<UploadUserFile[]>([
])
const currenttime = format.formatDate2(Date.now())
const sotre = AlbumsStore()
// albums
const uploadRef = ref<UploadInstance>()
const dialogFormVisible = ref(false)
const isErrorfile = ref(false)
const regex = /^image\//;
const currentpage = ref(1)
const image_list = ref<Album[]>([])
const srco = ref()
const isbottom = ref(false)
let error_count = 0
const dates = reactive({
    year: currenttime.year,
    month: currenttime.month
})
const get_list = async (times: any, id: number) => {
    const result = await sotre.get_list(times, id * 2 - 2)
    image_list.value = [...image_list.value, ...result.data]
    return result.data
}

onMounted(async () => {

    await get_list(format.formatDate2(Date.now()), currentpage.value)
})
const choiceyear = async (e: any) => {
    e
    isbottom.value = false
    currentpage.value = 1
    dates.month = 1
    image_list.value = []
    await get_list(dates, currentpage.value)
}
const choice = async (e: any) => {
    e
    isbottom.value = false
    currentpage.value = 1
    image_list.value = []

    await get_list(dates, currentpage.value)
}

//删除图片
const deletes = async (index: number, img: string, year: number, month: number, day: number) => {
    const delete_imgs = image_list.value[index].Albumbs.filter(item => {
        return item !== img
    })
    image_list.value[index].Albumbs = delete_imgs
    await sotre.img_delete({ year, month, day, img })
}
//添加图片
const add_img = () => {
    dialogFormVisible.value = true
}
//添加后上传
const update_img = async () => {
    if (isErrorfile.value) {

        ElMessage({
            type: "error",
            message: '错误的文件类型'
        })
    } else {
        let myFormData = new FormData()
        fileList.value.forEach((item, index) => {
            index
            //@ts-ignore
            myFormData.append("files", item.raw)
        })
        const result: any = await post_img(myFormData)
        if (result.code == 200) {
            nextTick(async () => {
                image_list.value = []
                currentpage.value = 1
                isbottom.value = false
                dates.year = currenttime.year,
                    dates.month = currenttime.month
                await get_list(dates, currentpage.value)
            })
            ElMessage({
                type: "success",
                message: "添加成功"
            })

        }
        uploadRef.value!.clearFiles()

        dialogFormVisible.value = false
    }
}
//判读上传文件格式
const onchange = (e: any) => {
    if (regex.test(e.raw.type)) {
    } else {
        error_count = error_count + 1
        isErrorfile.value = true
        ElMessage({
            type: "error",
            message: "错误的文件类型"
        })
    }
}
//---------上传------------

const dialogImageUrl = ref('')
const dialogVisible = ref(false)

const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
    uploadFiles
    if (!regex.test(uploadFile.raw?.type as string)) {
        error_count = error_count - 1
        if (error_count === 0) {
            isErrorfile.value = false

        }
    } else {
    }
}

const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile) => {
    dialogImageUrl.value = uploadFile.url!
    dialogVisible.value = true
}
//-------上传--------------
const scrolls = async (e: any) => {
    e
    if (srco.value.scrollTop + srco.value.clientHeight + 3 >= srco.value.scrollHeight) {
        console.log("到底了")
        if (isbottom.value) return
        currentpage.value = currentpage.value + 1
        const data = await get_list(dates, currentpage.value)
        console.log(data.length)
        if (data.length == 0) {
            isbottom.value = true
            if (srco.value.scrollTop > 1) {
                ElMessage({
                    type: "info",
                    message: "到底了"
                })
            }

        }
    } else {
    }
}
</script>

<style scoped lang="scss">
.alumbs {
    .top {
        display: flex;
        justify-content: flex-end;
        margin: 10px 0;
    }

    .alumb {
        background-color: white;
        height: 52vh;
        overflow-y: scroll;



        .days {
            p {
                margin: 1vw 0;
                font-size: 1.5vw;
                font-weight: bold;
            }

            .images {
                display: flex;
                flex-wrap: wrap;

                div {
                    position: relative;
                    margin-right: 1vw;

                    img {
                        position: absolute;
                        top: 0;
                        right: 0;
                    }
                }
            }

            display: flex;
            flex-direction: column;
        }
    }

}
</style>